<template>
  <div class="chart-container">
    <div ref="chart" class="chart" />
    <div class="chart-info">
      <div v-for="(item, index) in data" :key="index" class="chart-item">
        <div class="circle" :style="`background-color: ${item.circle};`" />
        <div class="chart-name">{{ item.name }}</div>
        <div class="chart-value">{{ item.value }}</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount } from "vue"
import * as echarts from "echarts"
const data = [
  {
    value: 18,
    name: "计划内",
    circle: "#00D090"
  },
  {
    value: 10,
    name: "无计划",
    circle: "#FF4A4A"
  },
  {
    value: 6,
    name: "外出",
    circle: "#FFC200"
  },
  {
    value: 8,
    name: "停车",
    circle: "#46CBF0"
  }
]
// 定义 chart 元素引用
const chart = ref<HTMLDivElement | null>(null)

// 初始化图表的函数
const initChart = () => {
  if (!chart.value) return

  // 实例化 ECharts
  const myChart = echarts.init(chart.value)

  // 计算数据总和
  const totalValue = data.reduce((sum, item) => sum + item.value, 0)
  // 配置项
  const option: echarts.EChartsOption = {
    title: {
      text: totalValue.toString(),
      subtext: "车辆总计",
      left: "center",
      top: "30%",
      textStyle: {
        fontWeight: "normal",
        fontSize: 20,
        color: "#fff"
      },
      subtextStyle: {
        fontSize: 11, // 可以调整副标题的字体大小
        lineHeight: -3, // 调整行高使subtext向上移动
        verticalAlign: "bottom", // 向上对齐
        color: "#fff"
      }
    },
    tooltip: {
      show: true,
      trigger: "item",
      textStyle: {
        color: "#000", // 设置文字颜色
        fontSize: 12 // 设置文字大小
      },
      formatter: "{b}: {c}辆 ({d}%)", // 悬停时显示名称、值和百分比
      position: "inside" // 使 tooltip 显示在图形内部
    },
    series: [
      {
        type: "pie",
        selectedMode: "single",
        radius: ["70%", "90%"], // 调整内外半径
        center: ["50%", "50%"],
        color: ["#00D090", "#FF4A4A", "#FFC200", "#46CBF0"],

        label: {
          show: false
        },
        labelLine: {
          show: false // 隐藏引导线
        },
        data: data
      }
    ]
  }

  // 设置配置项
  myChart.setOption(option)

  // 监听窗口大小变化，图表自适应
  const resizeHandler = () => {
    myChart.resize()
  }
  window.addEventListener("resize", resizeHandler)

  // 在组件销毁前移除事件监听器
  onBeforeUnmount(() => {
    window.removeEventListener("resize", resizeHandler)
    myChart.dispose() // 销毁图表实例
  })
}

// 在组件挂载时初始化图表
onMounted(() => {
  initChart()
})
</script>

<style scoped lang="scss">
.chart-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 43px;
  .chart {
    width: 110px;
    height: 110px;
  }
  .chart-info {
    width: 200px;
    height: 55px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .chart-item {
      width: 90px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #fff;
      .chart-name {
        width: 50px;
      }
      .circle {
        width: 8px;
        height: 8px;
        border-radius: 5px 5px 5px 5px;
      }
      .chart-value {
        font-family: DINCONDENSED;
        font-weight: bold;
        font-size: 18px;
      }
    }
  }
}
</style>
